<template>
    <!-- <h3>成绩页</h3> -->
     <div class="score">
         <h4>考试成绩</h4>
         <ul class="list" v-if="tableData">
               <li v-for="item in tableData">
                     <div class="left">
                            <h3>考试名称： <span>{{ item.name }}</span></h3>
                            <div>得分: <span>{{ item.score }}</span></div>
                     </div>
                     <div class="right">
                            <van-button type="success" @click="showScore(item.sid)" size="small">查看详情</van-button>
                     </div>
               </li>
         </ul>
         <div v-else>
              <p style="color: #ccc; text-align: center; padding: 50px 0; font-size: 18px;">暂无考试成绩~~</p>
         </div>
      <!-- 弹出对话框 -->
       <van-dialog v-model:show="show" title="考试成绩" show-cancel-button>
       <div class="box">
              <div class="opt">
                            <span class="label">用户:</span>
                            <span> {{ detail.nickName }}</span>
                     </div>
                     <div class="opt">
                            <span class="label">答对: </span>
                            <span>{{ detail.right2 }}</span>
                     </div>
                     <div class="opt">
                            <span class="label">答错: </span>
                            <span>{{ detail.wrong }}</span>
                     </div>
                     <div class="opt">
                            <span class="label">答题时间:  </span>
                            <span>{{ getDateTime(detail.createAt) }}</span>
                     </div>
                     <div class="opt">
                            <span class="label">考了多久: </span>
                            <span> {{ formatime(detail.time) }}</span>
                     </div>
                     <div class="opt">
                            <span class="label">考试成绩: </span>
                            <span>{{ detail.score }}</span>
                     </div>
              </div>
       </van-dialog>
         <div class="opt" style="text-align: center; margin: 150px;">
            <van-button @click="jumpTo" plain size="small" type="primary">跳转首页</van-button>
         </div>
     </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import request from '@/api/request'
import { ref } from 'vue';
const $router = useRouter()

// 获取token
// 用户的临时身份
let token = localStorage.getItem("AUTOTOKEN")
let tableData =  ref<any>([])
let show =  ref<boolean>(false)
let detail = ref<any>({})
if(token) {
       request.examScoreList({token})
       .then(
              (content: any)=>{
                     // console.log(content);
                     let {code , result} = content;
                     if(code == 200) {
                            tableData.value = result;
                     }
              }
       )
}

// 显示分数详情
const showScore = (sid:string) => {
       let arr = tableData.value.filter((item: any)=> {
              return item.sid == sid
       }) 
       detail.value = arr && arr[0];
       show.value = true;
}

const jumpTo = ()=> {
    $router.replace({path:'/home/category'})
}

// 格式化时间
const formatime = (value:number) => {
    let h:number | string = 0, m:number | string = 0 , s:number | string = 0;
    h = Math.floor(value / 3600);
    m = Math.floor(value % 3600 / 60);
    s = Math.floor(value % 60);
    h = h < 10 ? '0'+h:h ;
    m = m < 10 ? '0'+m:m ;
    s = s < 10 ? '0'+s:s ;
    return `${h}:${m}:${s}`
}
const getDateTime = (value:any) => {
       let dt = new Date()
       dt.setTime(value)
       let date = dt.toLocaleDateString()
       let time = dt.toLocaleTimeString()
       return `${date} ${time}`
}
</script>

<style lang="less">
 @import '../../static/less/variable.less';
.score {
    padding: @pad;
    h4 {
        height: 40px;
        line-height: 40px;
        font-size: 18px;
    }
    .opt {
        width: 100%;
        display: flex;
        font-size: 16px;
        height: 44px;
        line-height: 44px;
        border-bottom: 1px dashed #f0f0f0;
        margin-bottom: 10px;
    }

    .list {
       li {
              width: 100%;
              display: flex;
              justify-content: space-between;
              padding: 10px 15px;
              border: 1px solid #f0f0f0;    
              box-sizing: border-box; 
              h3 {
                     font-size: 18px;
                     margin-bottom: 10px;
              }
              p, div {
                     font-size: 16px;
              }
       }
    }
    .box {
       padding: 10px 15px;
    }
}

</style>